<template>
    <div class="chatai-container">
        <div v-if="isMobileDevice==false" class="chat-content chat-main" type="flex">
            <div class="chat-menu">
                <div style="border-bottom: 1px solid #d0d8de;">
                    <el-image :src="fullUrl(chatconfig.shop_logo)" style="max-width:300px;    margin-top: 40px;"/>
                </div>
                <div v-if="false">
                    <el-button type="primary"
                               @click="handleChat('new')"
                               style="width: 100%;height: 60px;background: #066BF7;border-radius: 30px;color:#fff;font-size: 24px;padding: 20px 50px;"
                               :icon="Plus" round>新建会话
                    </el-button>
                </div>
                <div class="chat-leet">
                    <div class="search-his" v-if="false">
                        <el-input
                            v-model="chatconfig.searchTitle"
                            size="large"
                            @keyup.enter.native="searchChat"
                            style="border-bottom: 1px solid #8F9EAB;"
                            placeholder="搜索对话内容"
                            :prefix-icon="Search"
                        />
                    </div>
                    <div class="chat-history">
                        <ul v-infinite-scroll="load" class="infinite-list">
                            <li v-for="(tabitem,ink) in chatconfig.applist"
                                :class="sendinfo.appid==tabitem.appid?'app-active':''" :key="ink" class="hisitem"
                                @click="appChange(tabitem)">
                                <el-image :src="fullUrl(tabitem.image)" class="app-icon"/>
                                {{ tabitem.title }}
                            </li>
                        </ul>
                        <span v-if="chatconfig.applist.length==0" style="color:#a5a5a5;">暂无应用</span>
                    </div>
                </div>
            </div>
            <div class="chat-main" v-if="state.showIntro==false">
                <div class="chat-model" v-show="state.activeAppname">
                    <el-image :size="50" v-if="false" style="width: 26px;height: 26px"
                              :src="fullUrl(state.activeApprow.image)"></el-image>
                    <span class="active-appname">{{ state.activeAppname }}</span>
                </div>
                <div class="chat-msg " style="position: relative;">
                    <div v-if="state.pageloading" class="msgcontent-scroll scrollRef" id="scrollRef" ref="scrollRef">
                        <div class="chat-item" style="background: #FFFFFF;">
                            <el-skeleton
                                :loading="state.pageloading"
                                animated
                            >
                                <template #template>
                                    <div class="chat-item" style="background: #FFFFFF;">
                                        <div style="margin-right: 10px">
                                            <el-image :size="30" style="width: 30px;height: 30px"
                                                      :src="fullUrl(state.activeApprow.image)"></el-image>
                                        </div>
                                        <div class="chat-respond" style="background: #FFFFFF;">
                                            <div class="chat-welcome" style="    padding: 20px 40px;">
                                                <h3 style="font-size: 16px;">
                                                    <el-skeleton-item variant="h3" style="width: 50%"/>
                                                </h3>
                                                <p style="font-size: 15px;">
                                                    <el-skeleton-item variant="h3" style="width: 100%"/>
                                                </p>
                                            </div>
                                            <div class="recommend-parts">
                                                <div class="rec-title">
                                                    <div class="title-info">
                                                        <el-skeleton-item variant="h3"
                                                                          style="width: 50px;margin-left: 20px;"/>
                                                    </div>
                                                </div>
                                                <div class="rec-content">
                                                    <div class="content-info">
                                                        <h3 class="quest-title">
                                                            <el-skeleton-item variant="text"
                                                                              style="margin-right: 16px"/>
                                                        </h3>
                                                        <p class="quest-desc" style="color: #333;">
                                                            <el-skeleton-item variant="text"
                                                                              style="margin-right: 16px"/>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-skeleton>
                        </div>
                    </div>
                    <div v-else class="msgcontent-scroll scrollRef" id="scrollRef" ref="scrollRef">
                        <div class="chat-item" style="background: #FFFFFF;">
                            <div style="margin-right: 10px">
                                <el-image :size="30" style="width: 30px;height: 30px"
                                          :src="fullUrl(state.activeApprow.image)"></el-image>
                            </div>
                            <div class="chat-respond" style="background: #FFFFFF;">
                                <div class="chat-welcome" style="    padding: 20px 40px;">
                                    <h3 style="font-size: 16px;">{{ chatconfig.welcome.title }}</h3>
                                    <p v-html="chatconfig.welcome.describe" style="font-size: 15px;"></p>
                                </div>
                                <div class="recommend-parts">
                                    <div class="rec-title">
                                        <div class="title-info">
                                            <el-icon>
                                                <ChatDotSquare/>
                                            </el-icon>
                                            你可以问我
                                        </div>
                                        <div class="title-info change-faqbtn"
                                             style="cursor: pointer; color:#066BF7;border: 1px solid #066BF7;padding: 2px;border-radius: 20px;font-size: 15px;"
                                             @click="keysChange"
                                             :disabled="chatconfig.welcome.faq_len<sendinfo.faq_num?true:false">
                                            <el-icon>
                                                <Refresh/>
                                            </el-icon>
                                            换一换
                                        </div>
                                    </div>
                                    <div class="rec-content">
                                        <el-popover v-for="(recitem,inx) in chatconfig.welcome.content" :key="inx"
                                                    placement="bottom"
                                                    :title="recitem.title"
                                                    :width="200"
                                                    trigger="hover"
                                                    :content="recitem.describes"
                                        >
                                            <template #reference>
                                                <div class="content-info question-hover">
                                                    <h3 class="quest-title">
                                                        <a class="down-file" style="position: relative;"
                                                           :download="fullUrl(recitem.file)"
                                                           v-if="recitem.file&&chatconfig.appfunIds.includes(6)"
                                                           :href="fullUrl(recitem.file)">
                                                                    <span
                                                                        style="color: #333333;font-size: 15px;cursor: pointer;">
                                                                        <img src="/assets/knowages_down.png"
                                                                             style="width: 20px;"/>
                                                                    </span>
                                                        </a><span @click="questionClick(recitem)"> {{
                                                            recitem.title
                                                        }}</span>
                                                        <!--                                            -->
                                                    </h3>
                                                    <p class="quest-desc" style="color: #333;"
                                                       @click="questionClick(recitem)">
                                                        {{ recitem.describes }}
                                                    </p>
                                                </div>
                                            </template>
                                        </el-popover>
                                    </div>
                                </div>
                                <div v-if="!chatconfig.appfunIds.includes(1)"
                                     style="font-size: 15px;color: #999999;text-align: right;margin-bottom: 11px;margin-right: 40px;">
                                    由<a href="https://www.super-aiagent.com" title="超算智能体"
                                         target="_blank">超算智能体</a>提供Ai支持
                                </div>
                            </div>
                        </div>
                        <template v-for="(chatitem,index) in chatconfig.chatList" :key="index">
                            <div class="chat-item" v-if="chatitem.type=='answer'">
                                <div style="margin-right: 10px">
                                    <el-image :size="30" style="width: 30px;height: 30px"
                                              :src="fullUrl(state.activeApprow.image)"></el-image>
                                </div>
                                <div class="chat-respond">
                                    <div class="chat-welcome">
                                        <div style="padding: 20px 40px;">
                                            <div style="font-size: 15px"
                                                 v-if="chating&&(((index+1)==chatconfig.chatList.length)?true:false)">
                                                <MarkdownMate :text="chatitem.answer" :speed="10" :isStop="writerStatus"
                                                              @loadOver="loadOver"/>
                                            </div>
                                            <div v-else style="font-size: 15px;" class="chat-answer">
                                                <div v-html="md.render(chatitem.answer)"></div>
                                            </div>
                                        </div>
                                        <div class="answer-source"
                                             style="margin: 10px 0;border-top: 1px solid #dbe1e6;padding: 20px 40px 0;font-size: 16px"
                                             v-if="chatitem.source&&chatitem.source.length>0">
                                            <p style="color: #999999;font-size: 15px;font-weight: bold">
                                                回答来源({{ chatitem.source.length }})</p>
                                            <div style="line-height: 20px;margin-top: 7px;">
                                                <p style="cursor: pointer;    display: inline-block;    margin-bottom: 10px;"
                                                   @click="viewSlice(sourfile)"
                                                   v-for="(sourfile,ink) in chatitem.source"
                                                   :key="ink" class="source-file">
                                            <span style="display: flex;height: 20px;    align-items: center;">
                                                 {{ ink + 1 }}、<el-icon size="16" style="margin-right: 14.74px"><Link/></el-icon>
                                                {{ sourfile.name }}
                                            </span>
                                                </p>
                                            </div>
                                        </div>
                                        <div v-if="!chatconfig.appfunIds.includes(1)"
                                             style="font-size: 15px;color: #999999;text-align: right;margin-bottom: 11px;margin-right: 40px;">
                                            由<a href="https://www.super-aiagent.com" title="超算智能体"
                                                 target="_blank">超算智能体</a>提供Ai支持
                                        </div>
                                    </div>
                                    <div class="opreate-content">
                                        <div
                                            style="display: flex;align-items: center;cursor: pointer;color: #333333;font-weight: bold;font-size: 15px;">
                                            <div @click="Regenerate(chatitem.question,chatitem.id)">
                                                <el-icon>
                                                    <RefreshRight/>
                                                </el-icon>
                                                重新生成
                                            </div>
                                            <div
                                                style="width: 1px;height: 19px;border: 1px solid #D0D8DE;    margin: 0 15px;"></div>
                                            <div @click="copyHandle(chatitem.editor,chatitem.id)">
                                                <el-icon>
                                                    <CopyDocument/>
                                                </el-icon>
                                                复制
                                            </div>
                                        </div>
                                        <div
                                            style="display: flex;align-items: center;cursor: pointer;color: #333333;font-weight: bold;font-size: 15px">
                                            <div @click="ReviewAnswer('good',chatitem.id)" style="font-size:15px">
                                                <img src="~/assets/icons/like-btn-active.svg"
                                                     v-if="chatitem.checkbox_arr.includes('good')===true"
                                                     style="width: 19px;height: 19px">
                                                <img src="~/assets/icons/like-btn.svg" v-else
                                                     style="width: 19px;height: 19px">
                                                好评
                                            </div>
                                            <div
                                                style="width: 1px;height: 19px;border: 1px solid #D0D8DE;margin: 0 15px;"></div>
                                            <div @click="ReviewAnswer('error',chatitem.id)" style="font-size:15px">
                                                <img src="~/assets/icons/cai-btn-active.svg"
                                                     v-if="chatitem.checkbox_arr.includes('error')===true"
                                                     style="width: 19px;height: 19px">
                                                <img src="~/assets/icons/cai-btn.svg" v-else
                                                     style="width: 19px;height: 19px">
                                                不准确
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="chat-question" v-if="chatitem.type=='question'">
                                <div class="chat-question-content"
                                     style="min-height: 50px;background: #066BF7;border-radius: 20px;font-size: 15px;color: #FFFFFF;text-align: left; line-height: 27px;padding: 10px 30px;max-width: 700px;"
                                     v-html="chatitem.question"></div>

                                <div style="margin-left: 10px">
                                    <el-avatar class="chat-person-avatar" :size="30"
                                               :src="fullUrl(userInfo.avatar)"/>
                                </div>
                            </div>
                        </template>
                        <div class="chat-item" v-if="sendLoading">
                            <div style="margin-right: 10px">
                                <el-image :size="30" style="width: 30px;height: 30px"
                                          :src="fullUrl(state.activeApprow.image)"></el-image>
                            </div>
                            <div class="chat-respond">
                                <div class="chat-welcome" style="white-space: pre-wrap;">
                                    <div style="padding: 20px 40px;font-size: 15px">智能体思考中......</div>
                                    <div style="padding: 0 40px;">
                                        <el-skeleton :rows="2" animated/>
                                    </div>
                                </div>
                                <div class="opreate-content" style="justify-content: flex-end;">
                                    <div @click="handleStopWriter"
                                         style="display: flex;align-items: center;color: #333333;font-weight: bold;font-size: 15px;cursor: pointer;">
                                        <el-icon style="margin-right: 5px;">
                                            <VideoPause/>
                                        </el-icon>
                                        停止生成
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chat-item" v-if="chatconfig.chaterror">
                            <div style="margin-right: 10px">
                                <el-image :size="50" style="width: 30px;height: 30px"
                                          :src="fullUrl(state.activeApprow.image)"></el-image>
                            </div>
                            <div class="chat-respond">
                                <div class="chat-welcome" style="white-space: pre-wrap;">
                                    <div style="padding: 20px 40px;color:red;font-size: 15px">
                                        {{ chatconfig.chatmsg }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="chat-bottom" ref="chat-bottom" style="margin-bottom: 10px;"></div>
                    </div>
                    <div @click="upTop" class="uptop-btn">
                        <el-icon size="25" color="#1d6bf3">
                            <Top/>
                        </el-icon>
                    </div>
                </div>
                <div class="chat-input ">
                    <div id="eb_model_footer" style="text-align: left;width: 50%;margin-left: 200px;">
                        <div class="IE3nwlYy-sefl ">
                            <div class="d3avY43y">
                                <div>
                                    <div class="kOcoVRXW">
                                        <div class="WAfmWndD" v-if="chatconfig.chatfile.name"
                                             style="margin-left: 25px;display: flex;align-items: center;">
                                            <div class="lUOR2_Cn"
                                                 style="background: #ffffff;border: 1px solid #8f9eab;border-radius: 22px;color: #333333;padding: 0 10px;display: flex;align-items: center;">
                                                {{ chatconfig.chatfile.name }}
                                                <el-icon style="margin-left: 15px;" @click="clearChatfile">
                                                    <Delete/>
                                                </el-icon>
                                            </div>
                                        </div>
                                        <div class="WAfmWndD" v-else style="margin-left: 25px;">
                                            <div class="lUOR2_Cn"
                                                 style="background: #ffffff;border: 1px solid #8f9eab;border-radius: 22px;color: #333333;">
                                                <span class="">
                                                    <input type="file" accept="image/jpeg,image/jpeg,image/png"
                                                           style="display: none;">
                                                    <div>
                                                        <span tabindex="0" role="button">
                                                            <div class="Z_zBaTrj">
                                                                <chatupload :data="{chatkey:sendinfo.chatkey,'driver':'local'}"
                                                                            @success="chatFileSusccess"
                                                                            @change="onElChange('image',$event)"
                                                                            type="image">
                                                                    <template #default>
                                                                        <svg
                                                                            width="17" height="17" fill="none"
                                                                            xmlns="http://www.w3.org/2000/svg"><path
                                                                            opacity="0.01"
                                                                            d="M16.238.5v16h-16V.5h16z"
                                                                            fill="currentColor"></path><path
                                                                            d="M11.776 6.127a.73.73 0 01-.74.72.73.73 0 01-.74-.72.73.73 0 01.74-.72.73.73 0 01.74.72z"
                                                                            fill="currentColor"></path><path
                                                                            fill-rule="evenodd"
                                                                            clip-rule="evenodd"
                                                                            d="M1.618 4.412c0-1.122.91-2.032 2.031-2.032h9.177c1.122 0 2.032.91 2.032 2.032v8.176c0 1.122-.91 2.032-2.032 2.032H3.649a2.032 2.032 0 01-2.031-2.032V4.411zm1.24 8.176V9.793L4.687 8.01l3.097 3.318a.62.62 0 00.886.021l1.352-1.317 3.431 3.038a.79.79 0 01-.627.309H3.649a.792.792 0 01-.791-.792zm7.555-3.865l3.205 2.837V4.412a.792.792 0 00-.792-.792H3.649a.792.792 0 00-.791.792v3.65L4.276 6.68a.62.62 0 01.885.02l3.098 3.32 1.31-1.278a.62.62 0 01.844-.02zm.133-2.596a.48.48 0 01.49-.47.48.48 0 01.49.47.48.48 0 01-.49.47.48.48 0 01-.49-.47zm.49-.97a.98.98 0 00-.99.97c0 .542.45.97.99.97a.98.98 0 00.99-.97.98.98 0 00-.99-.97z"
                                                                            fill="currentColor"></path></svg>
                                                                        <span class="m9eaDYSB"
                                                                              style="font-size: 15px">图片</span>
                                                                    </template>
                                                                 </chatupload>
                                                            </div>
                                                        </span>
                                                    </div>
                                                </span>
                                            </div>
                                            <div class="lUOR2_Cn"
                                                 style="background: #ffffff;border: 1px solid #8f9eab;border-radius: 22px;color: #333333;margin-left: 10px">
                                                <span class="">
                                                    <div>
                                                        <span tabindex="0" role="button">
                                                            <div class="Z_zBaTrj">
                                                                <chatupload :data="{chatkey:sendinfo.chatkey,'driver':'local'}"
                                                                            @success="chatFileSusccess"
                                                                            @change="onElChange('file',$event)"
                                                                            type="file">
                                                                    <template #default>
                                                                        <svg
                                                                            width="17" height="17" fill="none"
                                                                            xmlns="http://www.w3.org/2000/svg"><mask
                                                                            id="upload-file_svg__a"
                                                                            maskUnits="userSpaceOnUse"
                                                                            x="0"
                                                                            y="0" width="17" height="17"
                                                                            style="mask-type: alpha;"><path
                                                                            fill="#D9D9D9"
                                                                            d="M.238.5h16v16h-16z"></path></mask><g
                                                                            mask="url(#upload-file_svg__a)"
                                                                            fill-rule="evenodd"
                                                                            clip-rule="evenodd" fill="currentColor"><path
                                                                            d="M1.618 4.412c0-1.122.91-2.032 2.031-2.032h9.177c1.122 0 2.032.91 2.032 2.032v8.176c0 1.122-.91 2.032-2.032 2.032H3.649a2.032 2.032 0 01-2.031-2.032V4.412zm2.031-.792a.792.792 0 00-.791.792v8.176c0 .437.354.792.791.792h9.177a.792.792 0 00.792-.792V4.412a.792.792 0 00-.792-.792H3.649z"></path><path
                                                                            d="M8.684 7.162l.477.482c.21.208.546.207.754-.004a.552.552 0 00.007-.766L8.527 5.462a.533.533 0 00-.76 0L6.37 6.874a.552.552 0 00.003.77c.21.212.549.212.758 0l.477-.482v2.686c0 .301.24.545.537.545h.002a.541.541 0 00.536-.545V7.162zm-1.848 3.501a.62.62 0 000 1.24h2.76a.62.62 0 000-1.24h-2.76z"></path></g></svg>
                                                                        <span class="m9eaDYSB"
                                                                              style="font-size: 15px">文档</span>
                                                                    </template>
                                                                 </chatupload>
                                                            </div>
                                                        </span>
                                                    </div>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="eygNAozM">
                                            <div class="PB57KCF0">
                                                <span
                                                    style="font-size: 15px;color: #999999;">内容由AI生成，无法确保真实准确，仅供参考</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="HKzQWnxZ f1DrJFMk"></div>
                                </div>
                                <el-input ref="inputpcFocus"
                                          v-model="sendinfo.question"
                                          :autosize="{ minRows: 1, maxRows: 4 }"
                                          type="textarea"
                                          @keyup.ctrl.enter.native="lineBreak"
                                          @keydown.enter.exact.native="sendQuestion"
                                          class="pcinput-question"
                                          placeholder="输入要问的问题"
                                >
                                </el-input>
                                <el-button type="primary" class="VAtmtpqL2"
                                           style="bottom:18px;color:#fff;width: 100px;height: 40px;background: #066BF7;border-radius: 30px;    position: absolute;right: 9px;transition: all .16s;cursor: pointer"
                                           :loading="sendLoading" @click="sendQuestion">
                                    发送
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else style="margin-bottom: 0;width: 100%;">
                <Instructions></Instructions>
            </div>
            <div class="chat-uinfo" v-if="state.showIntro==false">
                <div style="display: flex;flex-direction: column;align-items: center;">
                    <el-avatar @click="userAvatarHandle" :size="50" :src="userInfo.avatar?fullUrl(userInfo.avatar):''"/>
                    <div @click="showLoginHandle" style="text-align: center;">
                        {{ userInfo.nickname ? userInfo.nickname : '请先登录' }}
                    </div>
                    <el-collapse-transition name="el-zoom-in-right" v-if="showEdit">
                        <div class="handle-seting">
                            <div>
                                <div style="display: flex;flex-direction: column;align-items: center;">
                                    <el-avatar @click="avatarDialogHandle" :size="50"
                                               :src="userInfo.avatar?fullUrl(userInfo.avatar):''"/>
                                    <span style="margin-top: 10px">{{ userInfo.nickname }}</span>
                                </div>
                                <div>今日免费咨询次数<span
                                    style="color:#2642bc">{{ chatInfoObj.$state.free_count }}</span>次，还剩余<span
                                    style="color:#2642bc">{{
                                        chatInfoObj.$state.free_count > chatInfoObj.$state.usecount ? parseInt(chatInfoObj.$state.free_count - chatInfoObj.$state.usecount) : 0
                                    }}</span>次
                                </div>
                            </div>
                            <div class="action-btn" v-if="userInfo.token">
                                <!--                                <el-button class="login" type="primary" :disabled="chatInfoObj.$state.loginset==3"-->
                                <!--                                           style="padding: 0 8px;width: 80px;    color: #ffffff;    background: rgb(6, 107, 247);"-->
                                <!--                                           @click="changePwdHandle">修改密码-->
                                <!--                                </el-button>-->
                                <el-button class="login" type="primary"
                                           v-if="chatInfoObj.$state.loginset==2||chatInfoObj.$state.loginset==1"
                                           style="padding: 0 8px;width: 80px;    color: #ffffff;    background: rgb(6, 107, 247);"
                                           @click="avatarDialogHandle">修改头像
                                </el-button>
                                <el-button class="register" type="info"
                                           v-if="chatInfoObj.$state.loginset==2||chatInfoObj.$state.loginset==1"
                                           style="padding: 0 8px;    width: 80px;color: #ffffff;" @click="handleLogout">
                                    退出登录
                                </el-button>
                            </div>
                            <div v-else>
                                <div v-if="chatInfoObj.$state.loginset==1" class="action-btn">
                                    <el-button class="login" type="primary" :disabled="chatInfoObj.$state.loginset==3"
                                               style="padding: 0 8px;width: 80px;    color: #ffffff;    background: rgb(6, 107, 247);"
                                               @click="showLoginHandle">登录
                                    </el-button>
                                </div>
                                <div v-if="chatInfoObj.$state.loginset==2" class="action-btn">
                                    <el-button class="login" type="primary" :disabled="chatInfoObj.$state.loginset==3"
                                               style="padding: 0 8px;width: 80px;    color: #ffffff;    background: rgb(6, 107, 247);"
                                               @click="showLoginHandle">登录
                                    </el-button>
                                    <el-button class="register" type="info"
                                               :disabled="chatInfoObj.$state.loginset==3||chatInfoObj.$state.loginset==1"
                                               style="padding: 0 8px;    width: 80px;color: #ffffff;"
                                               @click="showLoginHandle">
                                        注册
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-collapse-transition>
                </div>
                <div class="kefu-icons">
                    <img src="~assets/icon01.png" v-if="false" @click="helpCenter"
                         style="width: 40px;height: 40px;margin-bottom: 50px;cursor: pointer" alt=""/>
                    <nuxt-link :to="'/instructions/'+sendinfo.storeuuid">
                        <img src="~assets/icon01.png" @click="helpCenter"
                             style="width: 40px;height: 40px;margin-bottom: 50px;cursor: pointer" alt=""/>
                    </nuxt-link>
                    <img @click="openFeedback" src="~assets/icon02.png" style="width: 40px;height: 40px;cursor: pointer"
                         alt=""/>
                </div>
            </div>
        </div>
        <div v-else id="root" class="mobile" style="background: #eef1f4;">
            <div class="oeXv4K1r R4_y9hO3" id="headerbase">
                <div>
                    <header class="tHbEKeXP" id="bot-header" style="background: #eef1f4;">
                        <div class="peKWP3_v" style="height: 45px;">
                            <div class="RoP355qA" style="justify-content: space-between;">
                                <a href="javascript:;" class="IkgT9gZu" target="_self" rel="noreferrer">
                                    <img alt="logo" class="ryWDU5_o" :src="siteConfig.siteLogo">
                                </a>
                                <img @click="showModal" data-target="viewModal" :src="fullUrl(userInfo.avatar)"
                                     alt="头像"
                                     style="width: 30px;height: 30px;border-radius: 50%;">
                            </div>
                        </div>
                        <div class="tab-container2">
                            <el-dropdown trigger="click" @command="dropdownClick" class="appselect">
                                <span class="el-dropdown-link">
                                   {{ state.activeApprow.title }}<el-icon class="el-icon--right"><arrow-down/></el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu @command="dropdownClick">
                                        <el-dropdown-item v-for="(tabitem,ink) in chatconfig.applist" :key="ink"
                                                          :command="tabitem">
                                            {{ tabitem.title }}
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <ul class="tabs" style="display: none;">
                                <li v-for="(tabitem,ink) in chatconfig.applist" :key="ink" @click="appChange(tabitem)"
                                    :class="sendinfo.appid==tabitem.appid?'active':''">{{ tabitem.title }}
                                </li>
                            </ul>
                        </div>
                    </header>
                    <div class="yWn683Yp fgOqWQSc " style="z-index: 99;margin-top: 120px; position: relative;">
                        <div
                            style="background: rgb(208, 216, 222);width: 89%;height: 1px;position: relative;left: 0;right: 0;margin: 0 auto;"></div>
                        <div class="Aeb62d9V" id="scrollRef" ref="scrollRef"
                             style="background: #ffffff;border-radius: 30px;width: 100%;    overflow: auto;    height: 80vh;">
                            <div class="RCwi_6Dr" style="width: 100%;padding-bottom: 50px">
                                <div class="QdwbyXyV" style="padding: 30px 20px;display: flex;width: 100%">
                                    <div class="GRu1G0WQ">
                                        <div class="nalPiuUJ eXiMwSBM"><img :src="fullUrl(state.activeApprow.image)"
                                                                            alt=""></div>
                                    </div>
                                    <div class="EM8vqxpQ"
                                         style="border: 1px solid rgb(208, 216, 222);border-radius: 20px;">
                                        <div class="TrgFR61L" style="padding:0  10px">
                                            <strong style="font-size: 18px;">{{
                                                    chatconfig.welcome.title
                                                }}</strong><span
                                            v-html="chatconfig.welcome.describe"></span>
                                        </div>
                                        <div class="NT50N4q_">
                                            <div class="iFUYo8G6"><span>你可以问我：</span>
                                                <div class="SCzgpEFX">
                                                    <span class="GlCtHy_X" @click="keysChange"
                                                          :disabled="chatconfig.welcome.faq_len<sendinfo.faq_num?true:false"><span
                                                        class="CSgQ4aWh"><el-icon><Refresh/></el-icon></span>换一换</span>
                                                </div>
                                            </div>
                                            <div class="cSiqVhZz">
                                                <div class="GglPFY4s" style="padding: 1.2rem;"
                                                     v-for="(recitem,inx) in chatconfig.welcome.content" :key="inx">
                                                    <div class="VCFHibBS" @click="questionClick(recitem)"
                                                         @mousedown="startPress(recitem)"
                                                         @mouseup="cancelPress"
                                                         @mouseleave="cancelPress"
                                                         @touchstart="startPress(recitem)"
                                                         @touchend="cancelPress"
                                                         @touchmove="cancelPress">
                                                        <div class="O_jjVd39">
                                                            <span class="gabGcnsv"
                                                                  style="font-size: 15px;">{{ recitem.title }}</span>
                                                        </div>
                                                        <span class="rAlq8cYp">{{ recitem.describes }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div v-if="!chatconfig.appfunIds.includes(1)"
                                                 style="text-align: right;font-size: .95rem;color: #999999;margin-top: 10px;">
                                                <a href="https://www.super-aiagent.com" style="color:#999999;"
                                                   title="超算智能体" target="_blank">
                                                    由<span style="color:#066BF7;">超算智能体</span>提供AI支持
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <template v-for="(chatitem,index) in chatconfig.chatList" :key="index">
                                    <div class="chat-question"
                                         style="display: flex;justify-content: flex-end; margin-right: 20px; margin-top: 20px;"
                                         v-if="chatitem.type=='question'">
                                        <div style="min-height: 30px; background: rgb(6, 107, 247); border-radius: 20px;font-size: 14px;color: rgb(255, 255, 255);
    text-align: left;padding: 5px 15px;max-width: 270px;word-wrap: break-word;" v-html="chatitem.editor"></div>
                                        <div style="margin-left: 10px">
                                            <el-avatar class="chat-person-avatar" :size="30"
                                                       :src="fullUrl(userInfo.avatar)"/>
                                        </div>
                                    </div>
                                    <div class="QdwbyXyV" v-else style="padding: 30px 20px;display: flex;" :key="index">
                                        <div class="GRu1G0WQ">
                                            <div class="nalPiuUJ eXiMwSBM">
                                                <img :src="fullUrl(state.activeApprow.image)" alt="">
                                            </div>
                                        </div>
                                        <div class="dialog-card-wrapper X_HFux8u">
                                            <div class="G3_wuwFo">
                                                <div class="EM8vqxpQ AzB6wDUo"
                                                     style="background: #eef1f4; border: 1px solid rgb(208, 216, 222);border-radius: 10px;">
                                                    <div class="TrgFR61L"
                                                         style="padding:0  10px;background: #ffffff;border: 1px solid #f4f5f7;border-radius: 10px;">
                                                        <strong></strong>
                                                        <div class="mllzG0xD">
                                                            <div class="custom-html" style="padding: 0px 10px;"
                                                                 v-html="md.render(chatitem.editor)"></div>
                                                        </div>
                                                        <!--                                                <p v-html="chatitem.editor"></p>-->
                                                    </div>
                                                    <div class="NT50N4q_" style="padding: 10px 10px;">
                                                        <div
                                                            style="font-size: 14px;
            color: rgb(153, 153, 153);
            text-align: right;
            font-weight: bold;
            display: flex;
            justify-content: space-between;">
                                                            <div
                                                                style="display: flex;    align-items: center;cursor: pointer;font-size:14px">
                                                                <div @click="Regenerate(chatitem.question,chatitem.id)">
                                                                    <el-icon>
                                                                        <RefreshRight/>
                                                                    </el-icon>
                                                                </div>
                                                                <div
                                                                    style="width: 1px;height: 19px;border: 1px solid #D0D8DE;    margin: 0 12px;"></div>
                                                                <div @click="copyHandle(chatitem.editor,chatitem.id)">
                                                                    <el-icon>
                                                                        <CopyDocument/>
                                                                    </el-icon>
                                                                </div>
                                                            </div>
                                                            <div style="display: flex;align-items: center;cursor: pointer">
                                                                <div @click="ReviewAnswer('good',chatitem.id)">
                                                                    <img src="~/assets/icons/like-btn-active.svg"
                                                                         v-if="chatitem.checkbox_arr.includes('good')===true"
                                                                         style="width: 19px;height: 19px">
                                                                    <img src="~/assets/icons/like-btn.svg" v-else
                                                                         style="width: 19px;height: 19px">
                                                                </div>
                                                                <div
                                                                    style="width: 1px;height: 19px;border: 1px solid #D0D8DE;margin: 0 12px;"></div>
                                                                <div @click="ReviewAnswer('error',chatitem.id)">
                                                                    <img src="~/assets/icons/cai-btn-active.svg"
                                                                         v-if="chatitem.checkbox_arr.includes('error')===true"
                                                                         style="width: 19px;height: 19px">
                                                                    <img src="~/assets/icons/cai-btn.svg" v-else
                                                                         style="width: 19px;height: 19px">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div v-if="!chatconfig.appfunIds.includes(1)"
                                                             style="text-align: right;font-size: .95rem;color: #a89d9d;margin-top: 10px;">
                                                            由<span style="color:#4430ef"><a
                                                            href="https://www.super-aiagent.com"
                                                            target="_blank">超算智能体</a></span>提供AI支持
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <div class="QdwbyXyV" v-if="sendLoading" style="padding: 30px 20px;display: flex;">
                                    <div class="GRu1G0WQ">
                                        <div class="nalPiuUJ eXiMwSBM">
                                            <img :src="fullUrl(state.activeApprow.image)" alt="">
                                        </div>
                                    </div>
                                    <div class="EM8vqxpQ"
                                         style="background: #eef1f4; border: 1px solid rgb(208, 216, 222);border-radius: 10px;">
                                        <div class="TrgFR61L"
                                             style="padding:0  10px;background: #ffffff;border: 1px solid #f4f5f7;border-radius: 10px;">
                                            <strong></strong><span>智能体思考中......</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="QdwbyXyV" v-if="chatconfig.chaterror"
                                     style="padding: 30px 20px;display: flex;">
                                    <div class="GRu1G0WQ">
                                        <div class="nalPiuUJ eXiMwSBM">
                                            <img :src="fullUrl(state.activeApprow.image)" alt="">
                                        </div>
                                    </div>
                                    <div class="EM8vqxpQ"
                                         style="background: #eef1f4; border: 1px solid #f4f5f7;border-radius: 10px;">
                                        <div class="TrgFR61L"
                                             style="padding:0  10px;background: #ffffff;    white-space: pre-wrap;    border: 1px solid #f4f5f7;border-radius: 10px;">
                                            <strong></strong><span style="color:red;">{{ chatconfig.chatmsg }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dQeMqAG7 HKZmRVrh" id="dialogueFooter">
                            <div class="chat-input ">
                                <div id="eb_model_footer" style="height:72px;background: #edf1f4;">
                                    <div class="IE3nwlYy-sefl ">
                                        <div class="d3avY43y">
                                            <div class="kOcoVRXW" :class="chatconfig.chatfile.name?'mob-upfile-con':''"
                                                 style="position: fixed;bottom: 68px;width: 100%;padding: 0 20px;">
                                                <div class="WAfmWndD" v-if="false">
                                                    <div class="lUOR2_Cn"
                                                         style="display: flex;    align-items: center;    justify-content: center;margin-right: 10px">
                                                        <el-icon>
                                                            <Plus/>
                                                        </el-icon>
                                                        新会话
                                                    </div>
                                                    <div class="lUOR2_Cn"><span
                                                        style="display: flex;align-items: center;    justify-content: center;"><el-icon><ChatDotRound/></el-icon>2</span>
                                                    </div>
                                                </div>
                                                <div class="eygNAozM"
                                                     style="font-size: 10px;color: #999999;padding: 5px;border-radius: 25px;">
                                                    内容由AI生成，无法确保真实准确，仅供参考
                                                </div>
                                                <div style="display: flex;align-items: center;color: #999999;"
                                                     v-if="chatconfig.chatfile.name">
                                                    {{ chatconfig.chatfile.name }}
                                                    <el-icon style="margin-left: 15px;" @click="clearChatfile">
                                                        <Delete/>
                                                    </el-icon>
                                                </div>
                                            </div>
                                            <div class="chat-upfile"
                                                 style="margin:0;background: #fff;border-radius: 40px;height: 40px;display: flex;    align-items: center;    justify-content: space-around;padding: 20px;margin-left: 20px;margin-right: 20px;margin-top: 5px;">
                                                <chatupload :data="{chatkey:sendinfo.chatkey,'driver':'local'}"
                                                            @success="chatFileSusccess"
                                                            @change="onElChange('image',$event)" type="image">
                                                    <template #default>
                                                        <el-icon>
                                                            <CirclePlus/>
                                                        </el-icon>
                                                    </template>
                                                </chatupload>
                                                <span
                                                    style="margin: 0 10px;width: 1px;height: 16px;background: #d0d8de;"></span>
                                                <el-input @keyup.ctrl.enter.native="lineBreak"
                                                          @keydown.enter.exact.native="sendQuestion"
                                                          class="chat-input-question"
                                                          v-model="sendinfo.question"
                                                          ref="inputmobFocus"
                                                          placeholder="输入要问的问题"
                                                >
                                                </el-input>
                                                <el-button type="primary" :loading="sendLoading" class="mob-send-btn"
                                                           @click="sendQuestion">
                                                    <el-icon :size="30" v-if="!sendLoading">
                                                        <Top/>
                                                    </el-icon>
                                                </el-button>
                                            </div>
                                            <div style="margin: 0 20px;" v-if="false">
                                                <el-icon>
                                                    <ZoomIn/>
                                                </el-icon>
                                                <el-input class="chat-input-question" v-model="sendinfo.question"
                                                          placeholder="输入要问的问题">
                                                </el-input>
                                            </div>
                                        </div>
                                        <div v-if="false">
                                            <el-button type="primary" class="VAtmtpqL"
                                                       style="color:#fff;width: 30px;height:30px;background: #066BF7;border-radius: 50%;"
                                                       :loading="sendLoading" @click="sendQuestion">
                                                <el-icon :size="30" v-if="!sendLoading">
                                                    <Top/>
                                                </el-icon>
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <el-drawer :with-header="false"
                       v-model="modalName"
                       :direction="direction"
                       size="50%"
                       :before-close="handleClose"
            >
                <div style="display: flex;flex-direction: column;justify-content: space-between; height: 100vh;">
                    <div>
                        <div style="height: 200px;background: #066bf7;color: #fff;padding: 20px;">
                            <div style="display: flex;">
                                <div>
                                    <img @click="showModal" data-target="viewModal"
                                         :src="userInfo?fullUrl(userInfo.avatar):state.squareUrl" alt="头像"
                                         style="width: 30px;height: 30px;border-radius: 50%;">
                                </div>
                                <div v-if="userInfo&&userInfo.token"
                                     style="display: flex;align-items: center;color:#ffffff;">
                                        <span style="font-size: 15px;font-weight: 800;margin-left: 10px;">
                                            {{ userInfo.nickname }}
                                        </span>
                                </div>
                                <div style="display: flex;align-items: center;" v-else>
                                    <span style="font-size: 15px;font-weight: 800;margin-left: 10px;">
                                        <nuxt-link to="/login" style="color:#fff;">请登录</nuxt-link>
                                    </span>
                                </div>
                            </div>
                            <div style=" margin-top: 10px;font-size: 12px;">今日免费咨询次数
                                <span
                                    style="display: inline-block;border-radius: 20px;background: rgb(255, 255, 255); color: rgb(6, 107, 247);float: right;padding: 1px 4px;font-size: 12px;width: 45px;text-align: center;">
                                    {{ chatInfoObj.$state.usecount }}/{{ chatInfoObj.$state.free_count }}
                                </span>
                            </div>
                        </div>
                        <div
                            style="top: 120px;width: 100%;position: absolute;background: #ffffff;border-bottom: 0.5px solid #d0d8de;border-radius: 30px 0 0 0;">
                            <nuxt-link to="/instructions" style="    color: #333;">
                                <div class="cu-form-group " style="    border-radius: 30px 0px 0px;">

                                    <div class="title">
                                        <img src="~assets/icon01.png"
                                             style="width: 20px;height: 20px;    margin-right: 10px;"
                                             alt=""/>
                                        使用指南
                                    </div>
                                    <div class="allow-right">
                                        <el-icon>
                                            <ArrowRight/>
                                        </el-icon>
                                    </div>
                                </div>
                            </nuxt-link>
                            <div class="cu-form-group" @click="openFeedback" style="    color: #333;">
                                <div class="title">
                                    <img src="~assets/icon02.png"
                                         style="width: 20px;height: 20px;    margin-right: 10px;"
                                         alt=""/>
                                    意见反馈
                                </div>
                                <div class="allow-right">
                                    <el-icon>
                                        <ArrowRight/>
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="userInfo.token"
                         style="text-align: center; line-height: 50px;border: 0.5px solid #d0d8de;"
                         @click="handleLogout">
                        退出登录
                    </div>
                    <div v-else style="text-align: center; line-height: 50px;border: 0.5px solid #d0d8de;">
                        <nuxt-link to="/login" style="color:black;">去登录</nuxt-link>
                    </div>
                </div>
            </el-drawer>
        </div>
        <LoginModel v-if="isMobileDevice===false&&showLogin"></LoginModel>
        <FeedbackModel/>
        <el-dialog
            v-model="state.changePwd"
            title="修改密码"
            style="width: 660px;"
        >
            <changePassword></changePassword>
        </el-dialog>
        <el-dialog
            v-model="state.avatarDialog"
            title="修改头像"
            style="width: 660px;"
        >
            <changeUserAvatar></changeUserAvatar>
        </el-dialog>
        <el-dialog
            v-model="chunkVisible"
            title="回答来源"
            :before-close="handleChunkClose"
        >
            <div>
                <el-table v-loading="chunkLoading" v-if="chunkLoading"></el-table>
                <div style="max-height: 800px;margin-bottom: 20px;overflow: auto;">
                    <div style="white-space: pre-wrap;line-height: 36px;" v-html="sourfile.content"></div>
                </div>
            </div>
            <template #footer>
                <el-button @click="chunkVisible = false" style="margin-right: 20px;    padding: 0 10px;">知道了
                </el-button>
                <a :href="sourfile.url?sourfile.url:'javascritp:;'" :target="sourfile.url?'_blank':'_self'">
                    <el-button type="primary" style="background: rgb(29, 107, 243);color: #fff;    padding: 0 10px;">
                        查看源文件
                    </el-button>
                </a>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import LoginModel from "@/components/loginModel.vue";
import Instructions from "~/pages/instructions.vue";
import FeedbackModel from "@/components/feedbackModel.vue";
import chatupload from '@/components/baInput/chatupload.vue'
import changePassword from '~/pages/user/account/changePassword.vue'
import changeUserAvatar from '~/pages/user/account/editinfo.vue'
import {DrawerProps, ElLoading} from 'element-plus';
import {ArrowDown} from '@element-plus/icons-vue'
import {
    CirclePlus,
    ChatDotRound,
    ZoomIn,
    Top,
    Refresh,
    Plus,
    ChatDotSquare,
    Delete,
    Edit,
    Link,
    Search,
    RefreshRight,
    CopyDocument,
    ArrowRight, Loading, VideoPause
} from '@element-plus/icons-vue'
import {useSiteConfig} from '~/stores/siteConfig'
import {isMobile} from '~/utils/common'
import {useI18n} from 'vue-i18n'
import {reactive, toRefs, onMounted} from 'vue'
import type {TabsPaneContext} from 'element-plus'
import {ElMessage, ElMessageBox} from 'element-plus'
import Typewriter from '@/components/Typewriter.vue';
import MarkdownMate from '@/components/MarkdownMate.vue';
import {chatInfo} from '@/stores/chatinfo'
import {
    chatgptStream,
    getchat,
    newchat,
    initchat,
    handleDialogue,
    handleAnswer,
    changeQues,
    faqView
} from '~/api/user/chatai'
import {useScroll} from '~/plugins/hooks/useScroll'

const showEdit = ref(false)
const {t} = useI18n()
const direction = ref<DrawerProps['direction']>('rtl')
const {scrollRef, scrollToBottom, scrollToTop} = useScroll()
import {useRoute, useRouter} from 'vue-router'
import {USER_TOKEN_KEY} from '~/stores/constant/keys'

const inputpcFocus = shallowRef(null);
const inputmobFocus = shallowRef(null);
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

let md: any = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    gfm: true,
    breaks: true, // Convert '\n' in paragraphs into <br>
    highlight: function (str: any, lang: any) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return `<pre><code class="language-${lang} hljs">` +
                    hljs.highlight(str, {language: lang, ignoreIllegals: true}).value +
                    '</code></pre>';
            } catch (__) {
            }
        }

        return '<pre><code class="language-none hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
    }
})
const upTop = () => {
    scrollToTop()
}
const chatInfoObj = chatInfo()
useSeoMeta({
    title: 'AI会话',
})
definePageMeta({
    layout: false,
    name: 'user/chataiold',
    noNeedLogin: true,
})
const getCssVarName = (type: string) => {
    return `--el-box-shadow${type ? '-' : ''}${type}`
}
const setBaseinfo = () => {
    useRouter().push({'path': '/user/baseinfo'})
}
const avatarDialogHandle = () => {
    if (userInfo.token) {
        state.avatarDialog = true
    }
}
//修改头像
const editInfo = () => {

}
//换一换
const keysChange = () => {
    if (chatconfig.welcome.faq_len <= sendinfo.faq_num) {
        return false;
    }
    changeQues({
        page: chatInfoObj.$state.quePage + 1,
        appid: state.activeApprow.appid,
        limit: sendinfo.faq_num
    }).then(res => {
        chatconfig.welcome.content = res.data.data;
        if (res.data.current_page == res.data.last_page) {
            chatInfoObj.setquePage(0)
        } else {
            chatInfoObj.setquePage(res.data.current_page)
        }
    })
}
const load = () => {
    // getchat({page: 1}).then((res) => {
    //     if (res.code == 1) {
    //         state.chattitles = res.data.data
    //        // chatconfig.chatdialog=res.data.data
    //     }
    // }).finally(() => {
    //     //state.pageLoading = false
    // })
}
const chunkVisible = ref(false)
const handleChunkClose = () => {
    chunkVisible.value = false;
}
let sourfile = reactive({'url': '/'})
let chunkList = reactive([])
let chunkLoading = ref(false)
const viewSlice = async (sliceObj: any) => {
    chunkLoading.value = true
    sourfile = sliceObj;
    chunkVisible.value = true
    chunkList = []
    chunkLoading.value = false
    // await getSlice(sliceObj).then((res) => {
    //     chunkLoading.value = false
    //     if (res.code == 1) {
    //         chunkList = res.data
    //     }
    // })
}
const searchChat = () => {
    leftChatTitles()
}
const leftChatTitles = async () => {
    await getchat({page: 1, 'title': chatconfig.searchTitle}).then((res: any) => {
        if (res.code == 1) {
            chatconfig.chatdialog = res.data.data
        }
    }).finally(() => {

    })
}
const onElChange = (type: string, res: any) => {

}
const chatFileSusccess = (res: any) => {
    let temp_data = res.data
    chatconfig.chatfile = {
        name: temp_data.file.name,
        fullurl: temp_data.file.url,
        file_ids: temp_data.chat_file.id
    }
    if (temp_data.chat_file.id) {
        sendinfo.file_ids = temp_data.chat_file.id
    } else {
        ElNotification({
            title: '错误提示',
            message: '文件上传失败',
            type: 'error',
        })
    }
}
const clearChatfile = () => {
    chatconfig.chatfile = {
        name: '',
        fullurl: '',
        file_ids: ''
    }
    sendinfo.file_ids = ''
}
//删除操作
const deleteTitle = (item: any) => {

    DialogueSave({'action': 'delete', id: item.id})
}
const DialogueSave = async (item: any) => {
    await handleDialogue(item).then((res) => {
        loadData(sendinfo)
    })
}
const editTitle = (item: any) => {
    ElMessageBox.prompt('请输入要修改的名称', '提示', {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        inputErrorMessage: '',
        inputValue: item.title,
    })
        .then(({value}) => {
            DialogueSave({'action': 'edit', id: item.id, title: value})
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Input canceled',
            })
        })
}
const inputVal = ref();
const textInput = ref();

function lineBreak() {
    const textarea = sendinfo.question.$el; //注意此处获取dom
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const value = textarea.value;
    const newValue = value.substring(0, start) + "\n" + value.substring(end);
    textarea.value = newValue;
    textarea.selectionStart = textarea.selectionEnd = start + 1;
}

const writerStatus = ref(true)
const handleStopWriter = () => {
    console.log('<><><><><>')
    writerStatus.value = true
    if (state.eventSourceObj) {
        state.eventSourceObj.close();
    }
}

const chating = ref(false)
const lastLoad = ref(false)
const loadOver = (item: any) => {
    lastLoad.value = item.status
    writerStatus.value = true
    chatconfig.chatList[chatconfig.chatList.length - 1]['editor'] = item.copytext
}
const modalName = ref(false)
const showModal = () => {
    modalName.value = true
    //

}
const goLogin = () => {
    if (!userInfo.token) {
        useRouter().push({'path': '/login'})
    }
}
const handleClose = () => {
    modalName.value = false
}
const changePwdHandle = () => {
    state.changePwd = true
}

const DialogVisible = reactive({
    'feedbackDialog': false
})
const openFeedback = () => {
    DialogVisible.feedbackDialog = true
}
const helpCenter = () => {
    state.showIntro = !state.showIntro
    //router.push({'path':'/instructions'})
    // ElMessage({
    //     type: 'info',
    //     message: '开发中',
    // })
}

provide('DialogVisible', DialogVisible)

/**
 * 点评回答问题
 * */
const ReviewAnswer = (action: any, id: any) => {
    let newassignList = JSON.parse(JSON.stringify(chatconfig.chatList))
    let res_assign = <any>[]
    newassignList.forEach((item: any) => {
        if (item.id == id) {
            if (item.checkbox_arr.includes(action)) {
                let newcheck = [];
                item.checkbox_arr.forEach((chekit: any, cheke: any) => {
                    if (chekit != action) {
                        newcheck.push(chekit)
                    }
                })
                item.checkbox_arr = newcheck
            } else {
                item.checkbox_arr.push(action)
            }
        }
        res_assign.push(item)
    })
    chatconfig.chatList = res_assign
    handleAnswer({'action': action, 'id': id, 'storeuuid': sendinfo.storeuuid}).then(res => {
        return false;
    })
}
const showLogin = ref(false)
const copyHandle = (text: string, id: number) => {
    try {
        navigator.clipboard.writeText(text).then(res => {
            ElMessage({
                message: '复制成功',
                type: 'success',
            })
            ReviewAnswer('copy', id);
        }).catch(error => {
            ElMessage({
                message: '复制失败',
                type: 'error',
            })
        })
    } catch (e) {
    }
};
// 重新生成
const Regenerate = (reflashStr: any, id: any) => {
    sendinfo.question = reflashStr
    sendLoading.value = false
    ReviewAnswer('repeat', id);
    sendQuestion({})
}
const route = useRoute()
const sendLoading = ref(false)
const sendinfo = reactive({
    'question': '',
    'chatkey': '',
    'storeuuid': '',
    'appid': '',
    'num': 0,
    visitor: '',
    file_ids: '',
    faq_num: 6
})
const showLoginHandle = () => {
    let loginset = chatInfoObj.$state.loginset
    if (loginset == 1) {
        //白名称
        showEdit.value = !showEdit
        showLogin.value = true
        state.loginDialogConfig.showLogin = true;
        provide('loginDialogConfig', state.loginDialogConfig)
        return true
    }
    if (loginset == 2) {
        showEdit.value = !showEdit
        showLogin.value = true
        state.loginDialogConfig.showLogin = true;
        provide('loginDialogConfig', state.loginDialogConfig)
        return true
    }
    if (loginset == 3) {
        //免登陆
        return true
    }
}
const userAvatarHandle = () => {
    showEdit.value = !showEdit.value
    return false
    if (userInfo.token) {
        if (loginset == 1) {
            //白名称

            provide('baTable', baTable)
            return true
        }
        if (loginset == 2) {
            //常规登录（账号密码）
            showLogin.value = true
            return true
        }
        if (loginset == 3) {
            //免登陆
            return true
        }
    } else {

    }
}
const userInfo = useUserInfo()
// 发送数据
const sendQuestion = (e: any) => {
    let sendkey = sendinfo.question
    if (!sendkey) {
        return true
    }
    chatInfoObj.setUsecount()
    chatconfig.chaterror = false;
    chatconfig.chatmsg = ''
    if (state.activeApprow.expiration_time * 1000 < (new Date()).getTime()) {
        chatconfig.chaterror = true;
        chatconfig.chatmsg = 'APP已过期，请续费'
        // ElMessageBox.confirm(
        //     'APP已过期，请续费',
        //     '提示',
        //     {
        //         confirmButtonText: '关闭',
        //         showCancelButton: false,
        //         type: 'warning',
        //         draggable: true,
        //     }
        // )
        return
    }
    //e.preventDefault();
    writerStatus.value = false
    chating.value = true
    scrollToBottom()
    if (sendLoading.value == true) {
        return false
    }
    chatconfig.chatList.push({
        'question': sendkey,
        'editor': sendkey,
        'content': sendkey,
        'type': 'question',
        'chattype': 'text'
    })
    let sentintro = {...sendinfo}
    sendinfo.question = ''
    sendLoading.value = true
    let chatapi = import.meta.env.VITE_API_BASE_URL;//https://console.super-aiagent.com 正式的
    const eventSource = new EventSource(chatapi + '/api/chatai/respond?server=1&sentintro=' + JSON.stringify(sentintro) + '&ba_token=' + userInfo.getToken() + '&storeuuid=' + sendinfo.storeuuid);
    state.eventSourceObj = eventSource
    eventSource.onmessage = (event) => {
        sendLoading.value = false
        const data = <any>JSON.parse(event.data);
        if (data.code != 1) {
            eventSource.close();
            chatconfig.chaterror = true;
            chatconfig.chatmsg = data.msg ? data.msg : '服务器发送错误，请重试'
            if (data.code == 401) {
                if (isMobileDevice.value == true) {
                    setTimeout(() => {
                        window.location.href = '/login'
                    }, 2000)
                } else {
                    showLoginHandle()
                }
            }
            // ElMessageBox.confirm(
            //     data.msg ? data.msg : '服务器发送错误，请重试',
            //     '提示',
            //     {
            //         confirmButtonText: '关闭',
            //         showCancelButton: false,
            //         type: 'warning',
            //         draggable: true,
            //     }
            // )
            return
        }
        chatconfig.chatList.push(data)
        if (sendinfo.num == 0) {
            chatInfoObj.dataFill(data.chatkey)
        }
        if (sendinfo.num == 1) {
            leftChatTitles()
        }
        scrollToBottom()
    };
    eventSource.onerror = (error) => {
        sendinfo.question = ''
        sendLoading.value = false
        eventSource.close();
        state.eventSourceObj = null;
    };
    sendinfo.num++
    scrollToBottom()
}

const questionClick = (recItem: any) => {
    sendinfo.question = recItem.describes
    //sendQuestion({})
    faqView(recItem)
    nextTick(() => {
        inputpcFocus.value.focus();
        inputmobFocus.value.focus();
    });
}
let chatconfig: {
    searchTitle: String,
    shop_logo: string
    welcome: {
        appid: number
        title: string
        content: [],
        faq_len: number,
        describe: string
    }
    chatkey: string
    chathis: [],
    chatdialog: [],
    is_login: boolean,
    applist: [],
    chatList: any,
    chaterror: boolean,
    chatmsg: string,
    chatfile: Object,
    appfunIds: []
} = reactive({
    searchTitle: '',
    shop_logo: '',
    welcome: {appid: 0, title: '', content: [], describe: '', faq_len: 0},
    chatkey: '',
    chathis: [],
    chatdialog: [],
    is_login: false,
    applist: [],
    chatList: [],
    chaterror: false,
    chatmsg: '',
    chatfile: {
        name: '',
        fullurl: '',
        file_ids: ''
    },
    appfunIds: [],
    pageloading: false
})
//初始化
const loadData = (params: any) => {
    state.pageloading = true
    initchat(params).then((res) => {
        state.pageloading = false
        if (res.code == 1) {
            let storeconfig = Object.assign({...params}, {
                'chatkey': res.data.chatkey,
                free_count: parseInt(res.data.free_count),
                loginset: parseInt(res.data.loginset),
                usecount: parseInt(res.data.usecount),
                visitor: res.data.visitor
            })
            if (!userInfo.token) {
                userInfo.avatar = res.data.default_avatar;
            }
            state.activeApprow = res.data.defaultApp
            state.activeAppname = res.data.defaultApp.title
            chatInfoObj.dataFill(storeconfig)
            chatconfig.welcome = <any>res.data.welcome
            chatconfig.shop_logo = <any>res.data.shop_logo
            chatconfig.chathis = <any>res.data.chathis
            chatconfig.chatList = <any>res.data.chathis
            chatconfig.chatdialog = <any>res.data.chatdialog
            chatconfig.is_login = <any>res.data.is_login
            chatconfig.applist = <any>res.data.applist
            chatconfig.appfunIds = <any>res.data.appfunIds
            activeName.value = res.data.welcome.appid
            sendinfo.appid = res.data.welcome.appid
            sendinfo.chatkey = res.data.chatkey
            sendinfo.visitor = res.data.visitor
            setTimeout(() => {
                scrollToBottom()
            }, 200)
        } else {
            chatconfig.chathis = [];
            chatconfig.chatList = [];
            chatconfig.welcome.content = [];
            sendinfo.appid = ''
            sendinfo.chatkey = ''
        }
    })
}
//新建回话按钮
const handleChat = (type: any) => {
    newchat({storeuuid: sendinfo.storeuuid}).then((res) => {
        if (res.code == 1) {
            sendinfo.chatkey = res.data.chatkey
            if (type == 'new') {
                chatconfig.chatList = []
                window.location.href = route.path + '?chatkey=' + sendinfo.chatkey
            }
        }
    })
}
const siteConfig = useSiteConfig()
const state = reactive({
    squareUrl: fullUrl(userInfo.avatar),
    chattitles: [],
    changePwd: false,
    avatarDialog: false,
    activeAppname: '',
    activeApprow: {'image': "", 'name': '-', status: 0, expiration_time: ''},
    showIntro: false,
    loginDialogConfig: {showLogin: false, showRegister: false, showFindPwd: false},
    pageloading: true,
    eventSourceObj: null
})

provide('instrutionsVisible', state)
const activeName = ref(0)
//切换模型
const appChange = (tab: TabsPaneContext, event: Event) => {
    if (tab.props) {
        sendinfo.appid = <any>tab.props.name
        state.activeAppname = <any>tab.props.name
        state.activeApprow = <any>tab.props
    } else {
        state.activeApprow = <any>tab
        sendinfo.appid = <any>tab.appid
        state.activeAppname = <any>tab.title
    }
    sendLoading.value = false
    sendinfo.chatkey = ""
    chatconfig.chaterror = false;
    chatconfig.chatmsg = ''
    chating.value = false
    loadData(sendinfo)
}
const {squareUrl} = toRefs(state)
const isMobileDevice = ref(isMobile())
// 退出登录
const handleLogout = () => {
    userInfo.logout()
}
const dropdownClick = (command: any) => {
    state.activeApprow = command
    state.activeApprow = <any>command
    sendinfo.appid = <any>command.appid
    state.activeAppname = <any>command.title
    sendLoading.value = false
    sendinfo.chatkey = ""
    chatconfig.chaterror = false;
    chatconfig.chatmsg = ''
    loadData(sendinfo)
}

const timer = ref(null);

const startPress = (touchItem: any) => {
    timer.value = setTimeout(() => {
        ElMessageBox.alert(touchItem.describes, touchItem.title, {
            // if you want to disable its autofocus
            // autofocus: false,
            confirmButtonText: '关闭',
            callback: (action: Action) => {
                // ElMessage({
                //     type: 'info',
                //     message: `action: ${action}`,
                // })
            },
        })
    }, 800); // 800ms 触发长按
};
const cancelPress = () => {
    clearTimeout(timer.value);
};
provide('loginDialogConfig', state.loginDialogConfig)

onMounted(() => {
    if (window.innerWidth >= 1920) {
        sendinfo.faq_num = 8
    } else {
        sendinfo.faq_num = 6
    }
    const temp_chatkey = chatInfoObj.getChatKey()
    sendinfo.storeuuid = <any>useRoute().params.storeuuid
    sendinfo.chatkey = <any>useRoute().query.chatkey ? <any>useRoute().query.chatkey : temp_chatkey
    sendinfo.visitor = chatInfoObj.$state.visitor
    chatInfoObj.dataFill(sendinfo)
    loadData(sendinfo)
})
</script>




<style scoped lang="scss">
.custom-html {
    overflow-wrap: break-word;
    word-break: normal;
    color: #06071f;
    cursor: auto;
    font-size: 15px;
    font-weight: 400;

    :deep(a) {
        color: #4955f5;
        word-wrap: break-word;
        text-decoration: none;
    }
}

.chat-answer {
    line-height: 18px;

    :deep(p) {
        line-height: 27px;
        display: inline-block;
    }

    :deep(h1, h2, h3, h4, h5, h6 ) {
        margin-bottom: 0;
    }
}

input, textarea {
    font-size: 16px;
}

.lUOR2_Cn {
    border-radius: 30px;
    background: #ffff;
}

:deep(.el-drawer__body) {
    padding: 0 !important;
}

.opreate-content {
    font-size: 15px;
    color: #999999;
    text-align: right;
    margin: 0 40px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 11px;
}

.tab-container2 {
    border: 1px solid #d0d8de;
    border-radius: 30px 30px 0 0;
    background: #ffffff;
    border-bottom: none;
    height: 112px;
    position: relative;

    .title {
        padding-left: 30px;
        font-size: 12px;
        color: #ddd
    }

    .tabs {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .tabs li {
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        cursor: pointer;
        position: relative;
        font-size: 18px;
        color: #909399;
        background-color: #fff
    }

    .tabs li:after {
        content: "";
        width: 0;
        height: 4px;
        background-color: #2543bb;
        position: absolute;
        left: 100%;
        bottom: 0;
        transition: all .4s
    }

    .tabs li.active {
        color: #2543bb;
    }

    .tabs li.active:after {
        width: 100%;
        left: 0;
        transition-delay: .1s
    }

    .tabs li.active ~ li:after {
        left: 0
    }

    .appselect {
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 22px;
        font-size: 16px;
    }
}

.tabs {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 22px;

    li {
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        cursor: pointer;
        position: relative;
        color: #909399;
        background-color: #fff;
        font-size: 24px;
        color: #909399;

        &::after {
            content: "";
            width: 0;
            height: 2px;
            position: absolute;
            left: 100%;
            bottom: 0;
            transition: all .4s;
        }

        &:hover {
            color: #066BF7;

            &::after {
                width: 100%;
                left: 0;
                transition-delay: 0.1s;
            }

            & ~ li::after {
                left: 0;
            }
        }
    }
}

.search-his {
    :deep(.el-input__wrapper) {
        background-color: transparent;
        border-bottom: 1px solid rgb(143, 158, 171);
        box-shadow: none;
        outline: none;
        border-radius: 0;
        background: transparent !important;
        transition: background-color 0s linear 3600s;
    }

    .el-textarea__inner, .el-input__inner {
        background: transparent !important;
    }
}

.chat-main {
    background: rgba(237, 241, 244, .9);
}

.chatai-container {
    background-image: url('~/assets/chatbg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

:deep(.el-tabs__active-bar) {
    height: 5px;
    background: #066BF7;
}

.chat-content {
    height: 100vh;
    padding-right: 7px;
    display: flex;

    .chat-menu {
        padding: 0 40px;
        text-align: center;
        width: 300px;
        flex: 0 0 auto;

        .chat-leet {
            .chat-history {
                height: 60vh;
                overflow: scroll;

                .hisitem {
                    border-radius: 5px;
                    font-size: 16px;
                    margin-top: 21px;
                    text-align: left;
                    height: 45px;
                    line-height: 45px;
                    padding: 0 20px;
                    font-style: normal;
                    color: #333333;

                    .app-icon {
                        width: 26px;
                        height: 26px;
                        margin-right: 10px;
                    }

                    display: flex;
                    align-items: center;

                    &:hover {
                        color: #6469e3;
                        background: linear-gradient(#eceffe, #e7f1fd);
                        background: #ffffff;
                        border: 1px solid #d0d8de;
                        border-radius: 31px;

                        .his-action {
                            display: inline-block;
                            color: #FFFFFF;
                        }

                        a {
                            color: #FFFFFF;
                            background: #066BF7;
                        }
                    }
                }

                .app-active {
                    color: #6469e3;
                    background: linear-gradient(#eceffe, #e7f1fd);
                    background: #ffffff;
                    border: 1px solid #d0d8de;
                    border-radius: 31px;
                }

                .his-action {
                    display: none;
                }

                .hisitem-act {
                    color: #FFFFFF;
                    background: #066BF7;
                }
            }
        }
    }

    :deep(.el-tabs__nav-wrap:after) {
        height: 0;
    }

    flex-direction: row;

    .chat-main {
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;
        background: #FFFFFF;
        box-shadow: 0 0 20px 0 #D9E5ED;
        border-radius: 30px;
        border: 1px solid #D0D8DE;
        margin-bottom: 200px;

        .chat-model {
            justify-content: flex-start;
            display: flex;
            z-index: 10;
            align-items: center;
            height: 45px;
            min-height: 45px;
            padding-left: 20px;
            width: 100%;
            background: #f3faff;
            border: 1px solid #d0d8de;
            border-radius: 20px 20px 0 0;
            box-shadow: -5px -5px 3px 0px rgba(230, 237, 244, 0.50) inset;

            :deep(.el-tabs__item) {
                font-size: 21px;
                color: #333333;
                margin-bottom: 10px;
            }

            :deep(.el-tabs__item.is-active) {
                color: #066bf7;
            }

            .active-appname {
                font-size: 16px;
                text-align: left;
                color: #000000;
                font-weight: 400;
                margin-left: 10px;
                opacity: 1;
            }
        }

        .chat-msg {
            background: #FFFFFF;
            // border: 1px solid #D0D8DE;
            height: 100%;
            border-radius: 0 0 20px 20px;
            //&:after {
            //    content: "";
            //    display: block;
            //    bottom: 86px;
            //    position: relative;
            //    height: 87px;
            //    border-radius: 20px;
            //    background-image: linear-gradient(360deg, #f3f5ff, rgb(239 241 248 / 84%) 19%, rgba(162, 189, 255, 0) 79%);
            //    width: 100%;
            //}

            .chat-item {
                display: flex;

                .chat-person-avatar {
                    width: 30px;
                    height: 30px;
                    border-radius: 15px;
                    margin-right: 10px;
                }

                .chat-respond {
                    border: 1px solid #D0D8DE;
                    margin-bottom: 10px;
                    background: #eef1f4;
                    border-radius: 20px;
                    font-size: 18px;
                    color: #333333;
                    width: 800px;

                    .chat-welcome {
                        background: #FFFFFF;
                        border-radius: 20px;
                        border: 1px solid #D0D8DE;
                        margin-bottom: 10px;
                    }

                    .recommend-parts {
                        padding: 20px 30px;

                        .rec-title {
                            display: flex;
                            justify-content: space-between;
                            margin-bottom: 10px;

                            .title-info {
                                display: flex;
                                font-size: 15px;
                                align-items: center;

                                &:disabled {
                                    cursor: not-allowed;
                                }

                            }
                        }

                        .rec-content {
                            display: flex;
                            gap: 20px;
                            flex-wrap: wrap;
                            justify-content: flex-start;

                            .content-info {
                                cursor: pointer;
                                background: #EDF1F4;
                                border-radius: 22px;
                                padding: 10px 20px;
                                height: 70px;
                                width: 220px;

                                .quest-title, h3 {
                                    font-size: 15px;
                                    color: #066BF7;
                                    margin-bottom: 0;
                                    width: 180px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;

                                    .down-file {
                                        display: block;
                                        top: -3px;
                                        right: 0;
                                        text-align: right;
                                        float: right;
                                    }
                                }

                                .quest-desc, p {
                                    width: 200px;
                                    font-size: 15px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                        }

                    }
                }
            }

            .chat-question {
                margin-bottom: 20px;
                display: flex;
                margin-top: 15px;
                justify-content: flex-end;

                .chat-question-content {
                    font-size: 15px;
                }
            }

            .msgcontent-scroll {
                //overflow: scroll;
                //height: 101%;
                //padding: 10px 180px;
                //padding-bottom: 120px;
                overflow: scroll;
                height: 100%;
                padding-bottom: 10px;
                width: 820px;
                margin: 0 auto;
                padding-top: 10px;
            }
        }

        .chat-input {
            /* border-radius: 20px; */
            /* flex-direction: row; */
            /* z-index: 10; */
            /* padding: 20px; */
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 20px;
            /* padding-bottom: 50px; */
            /* background: rgba(255, 255, 255, 0.2); */
            /* text-align: center; */
            /* align-items: flex-start; */
            width: 100%;
            left: 0;
            /* background-image: linear-gradient(1deg, rgba(232, 61, 61, 0) 40%, #ffffff 100%); */
            right: 0;

            :deep(.el-textarea__inner) {
                border: 0;
                -webkit-appearance: none;
                background-color: #FFF;
                background-image: none;
                border-radius: 4px;
                border: 0px; //改成0，边框就消失了！
                width: 100%;
                box-shadow: none;
            }

            /* 如果你的 el-input type 设置成textarea ，就要用这个了 */
            :deep(.el-textarea__inner) {
                border: 0;
                resize: none; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
            }

            .send-btn {
                width: 100px;
                height: 40px;
                background: #066BF7;
                border-radius: 30px;
                box-shadow: none;
                color: #fff;
            }

            &::after, ::before {
                background-image: linear-gradient(1turn, #2441bf, #2556cfd6 19%, #a2bdff00 79%);
            }
        }

        .source-file {
            border-radius: 7px;
            background: rgb(232, 238, 253);
            color: rgb(0, 145, 255);
            font-size: 15px;
            font-weight: 400;
            margin-right: 20px;
            padding: 8px 13px;
        }
    }

    .chat-uinfo {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 167px;
        margin-top: 20px;

        .kefu-icons {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom: 264px;
            align-items: center;
        }
    }
}

.change-faqbtn[disabled=true] {
    background-color: #eef1f4 !important;
    color: #888 !important;
    border-color: #eef1f4 !important;
    cursor: not-allowed !important;
}

.IE3nwlYy-sefl {
    margin-bottom: -2px;
    margin-left: 0;
    margin-right: 0;
    min-height: 50px;
    overflow: hidden;
    position: relative;
}
</style>
<style scoped>
@import url('assets/newsite/chataipc.css');
@import url("assets/colorui/main.css");
@import url("assets/colorui/icon.css");
@import url("assets/colorui/animation.css");
</style>
<style lang="scss" scoped>
.uptop-btn {
    position: absolute;
    right: 30px;
    bottom: 50px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #1d6bf3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-upfile {
    :deep(.ba-upload .el-upload--picture-card, .ba-upload .el-upload--picture-card) {
        width: 21px;
        height: 21px;
    }

    :deep(.el-upload--picture-card>i) {
        font-size: 1rem !important;
    }
}

.mob-send-btn {
    color: #fff;
    width: 30px;
    height: 30px;
    background: #066BF7;
    border-radius: 50%;

    :deep(span i) {
        font-size: 30px;
    }

    &:disabled {
        width: 2.67rem;

        :deep(span) {
            display: none;
        }
    }
}

span[disabled=true] {
    color: #a8a8a8 !important;
    cursor: not-allowed !important;
}

:deep(.el-tabs__header) {
    margin: 0;
}

.lUOR2_Cn[data-v-1accdb6b] {
    height: 25px;
    background: #ffffff;
    color: #066bf7;
    border: 1px solid #066bf7;
    border-radius: 30px;
    line-height: 25px;
    font-size: 12px;
    min-width: 45px;
    text-align: center;
}

.chat-input-question {
    min-height: 40px;
    background: #FFFFFF;
    border-radius: 20%;
    border: none;
    box-shadow: none;

    :deep(.el-textarea__inner) {
        box-shadow: none;
    }

    :deep(.el-input__wrapper:hover) {
        box-shadow: none;
    }

    :deep(.el-input__wrapper) {
        box-shadow: none;
    }
}

.cu-form-group {
    height: 50px;
    background: #ffffff;
    border: 0.5px solid #d0d8de;
    padding: 1px 26px;
    width: 100%;
    min-height: 50px !important;

    .title {
        font-size: 12px;
    }
}

@media screen and (min-width: 1920px) {
    /* 样式 */
    .chat-content {
        .chat-menu {
            width: 300px;
        }

        .chat-main {
            .chat-msg {
                .msgcontent-scroll {
                    overflow: scroll;
                    height: 100%;
                    width: 1200px !important;
                }

                .chat-respond {
                    width: 1200px !important;
                }
            }
        }

        .chat-uinfo {
            width: 115px;
        }
    }
}

@media screen and (max-width: 750px) {
    * {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }
    body {
        font-size: 0.24rem;
        max-width: 750px;
        min-width: 320px;
        margin: 0 auto;
        padding: 0;
        background: #f7f8fa;
        color: #000;
    }
    .chat-content {
        .chat-main {
            //margin-left: 80px;
        }

        .chat-uinfo {
            width: 80px;
        }
    }
}

@media screen and (max-width: 1366px) {
    /* 样式 */
    .chat-content {
        .chat-menu {
            width: 300px;
        }

        .chat-main {
            .chat-msg {
                .msgcontent-scroll {
                    overflow: scroll;
                    height: 100%;
                }
            }
        }

        .chat-uinfo {
            width: 115px;
        }
    }
}

/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width: 959px) {
    .chat-content {
        .chat-main {
            .chat-msg {
                .msgcontent-scroll {
                    overflow: scroll;
                    height: 100%;
                }
            }
        }

        .chat-uinfo {
            width: 80px;
        }
    }
}

/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width: 767px) {
    .chat-content {
        .chat-main {
            .chat-msg {
                .msgcontent-scroll {
                    overflow: scroll;
                    height: 100%;
                }
            }
        }

        .chat-uinfo {
            width: 80px;
        }
    }
    .GglPFY4s {
        padding: 1rem;
        border-radius: 20px;
    }
}

.DrawerPage {
    z-index: 999999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    background-color: #f1f1f1;
    transition: all 0.4s;
}

.DrawerPage.show {
    transform: scale(0.9, 0.9);
    right: 55vw;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
    transform-origin: 0;
}

.DrawerWindow {
    position: absolute;
    width: 55vw;
    height: 100vh;
    right: 0;
    top: 0;
    transform: scale(0.9, 0.9) translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s;
    background: #fff;
    z-index: 9999999;
}

.DrawerWindow.show {
    transform: scale(1, 1) translateX(0%);
    opacity: 1;
    pointer-events: all;
}

.DrawerClose {
    position: absolute;
    width: 40vw;
    height: 100vh;
    left: 0;
    top: 0;
    color: transparent;
    padding-bottom: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    letter-spacing: 5px;
    font-size: 50px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s;
    background: rgb(0 0 0 / 50%);
    z-index: 99999999;
}

.DrawerClose.show {
    opacity: 1;
    pointer-events: all;
    width: 45vw;
    color: #fff;
}

.handle-seting {
    position: absolute;
    right: 0;
    top: 80px;
    margin-bottom: 10px;
    width: 310px;
    border-radius: 4px;
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
    background: #fff;
    z-index: 99;
    border: 1px solid #ffffff;
    box-shadow: 0 0 20px 0 #D9E5ED;

    .action-btn {
        padding: 10px 0;
        margin: 0 -12px -12px -12px;
        display: flex;
        justify-content: space-around;
    }
}

.mob-upfile-con {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.question-hover {
    &:hover {
        border: 1px solid #1d6bf3;
    }
}

.pcinput-question {
    padding-right: 50px;
    min-height: 60px;
    background: #FFFFFF;
    border-radius: 40px;
    padding: 18px 18px;
    border: 1px solid #8F9EAB;

    &:hover {
        border: 1px solid #1d6bf3;
    }
}
</style>
